<!--工单信息列表表格展示-->
<template>
  <div class="" style="margin-top: .1rem;">
    <DicTable
        height="100%"
        ref="GBLtable"
        stripe
        highlight-current-row
        highlight-hover-row
        header-row-class-name="header-row-class"
        row-class-name="ne-row-class"
        :columnData="GBLtbs.tableColumns"
        :tableData="datasource.customerOrder"
        :loading="listLoading"
        :currentPage="parseInt(datasource.pageInfo.pageIndex)"
        :page-size="parseInt(datasource.pageInfo.pageSize)"
        :totalResult="parseInt(datasource.pageInfo.rowCount)"
        @radio-change="itemRadioChange"
        :pager="true"
        border="none"
        @on-page-change="handleCurrentChange"
        :sort-config="{remote: true, trigger: 'cell', defaultSort: {field: 'age', order: 'desc'}, orders: ['desc', 'asc', null]}"
        @sort-change="sortChange"
    >
      <template #custSoNumberheader>
        <p style="cursor: pointer" @click="custSoNumberSortEvent">
            <span>流水号</span>
            <span class="vxe-cell--sort">
              <i title="升序：最低到最高" :class="{'sort--active': custSoNumberOrder=='asc'}" class="vxe-sort--asc-btn vxe-icon--caret-top"></i>
              <i title="降序：最高到最低" :class="{'sort--active': custSoNumberOrder=='desc'}" class="vxe-sort--desc-btn vxe-icon--caret-bottom"></i>
            </span>
        </p>
      </template>
      <template #custSoNumber="{ row }">
        <a class="ne-cusnum" @click="showSaleInfo(row)">{{JSON.parse(row.batchNbr) > 0 ? row.custSoNumber + '-' + row.batchNbr : row.custSoNumber}}</a>
        <i class="el-icon-arrow-right" style="font-size: .14rem;color: blue;"></i>
      </template>
      <template #status="{ row }">
        <div class="box-right-icon left">
          <div class="flex" v-if="row.audState=='待送审核'"><div class="m-status-icon red-icon"></div><p>{{row.audState}}</p></div>
          <div class="flex" v-else-if="row.audState=='待审核'"><div class="m-status-icon orange-icon"></div><p>{{row.audState}}</p></div>
          <div class="flex" v-else-if="row.audState=='审核同意'"><div class="m-status-icon blue-icon"></div><p>{{row.audState}}</p></div>
        </div>
      </template>
      <template #info="{ row }">
        <el-popover width="480" trigger="click">
          <el-row >
            <el-col :span="12">
              <p class="ne-more-info">
                客户经理：<span>{{ row.custManagerName }}</span>
              </p>
            </el-col>

            <el-col :span="12">
              <p class="ne-more-info">
                项目经理：<span>{{ row.audFirstName }}</span>
              </p>
            </el-col>

            <el-col :span="12">
              <p class="ne-more-info">
                客户经理电话：<span>{{ row.custManagerPhone }}</span>
              </p>
            </el-col>
            <el-col :span="12">
              <p class="ne-more-info">
                项目经理电话：<span>{{ row.audFirstPhone }}</span>
              </p>
            </el-col>

            <el-col :span="12">
              <p class="ne-more-info">
                项目编号：<span>{{ row.projectId }}</span>
              </p>
            </el-col>
            <el-col :span="12">
              <p class="ne-more-info">
                项目名称：<span>{{ row.projectName }}</span>
              </p>
            </el-col>

            <el-col :span="12">
              <p class="ne-more-info">
                受理运营商：
                <span>
                  {{ row.orderSourceName }}
                </span>
              </p>
            </el-col>

            <el-col :span="12">
              <p class="ne-more-info">
                受理日期：<span>{{ row.createDate }}</span>
              </p>
            </el-col>
            <el-col :span="12">
              <p class="ne-more-info">
                审核日期：<span>{{ row.audDate }}</span>
              </p>
            </el-col>

            <el-col :span="12">
              <p class="ne-more-info">
                发起局：<span>{{ row.orgName }}</span>
              </p>
            </el-col>
            <el-col :span="12">
              <p class="ne-more-info">
                发起人：<span>{{ row.staffName }}</span>
              </p>
            </el-col>

            <el-col :span="12">
              <p class="ne-more-info">
                发起人电话：<span>{{ row.staffPhone }}</span>
              </p>
            </el-col>
            <el-col :span="12">
              <p class="ne-more-info">
                订单来源：<span>{{ row.extSystemName }}</span>
              </p>
            </el-col>

            <el-col :span="12">
              <p class="ne-more-info">
                IDC群号：<span>{{ row.groupNbr }}</span>
              </p>
            </el-col>
          </el-row>
          <i class="iconfont icon-icon-xiangqing" slot="reference" style="font-size: .22rem;color: #2a83e2;cursor: pointer;"></i>
        </el-popover>
      </template>
      <template #operation="{ row }">
        <el-row class="ne-button-d flex clearfix">
          <el-popover popper-class="ne-pending" placement="right" trigger="hover">
            <ul class="ne-pending-items flex">
              <li v-for="(item2, index) in lookListData" :key="index">
                <a @click="openLookPendDialog(item2, row)">{{ item2.title }}</a>
              </li>
            </ul>
            <el-button
                slot="reference"
                class="ne-btn-bp blue"
                icon="el-icon-search"
                size="small"
            >查看</el-button
            >
          </el-popover>
          <el-button class="ne-btn-bp blue" icon="el-icon-sell" @click="uploadFun(row)" size="small">{{row.elecFile}}</el-button>
          <el-popover
              @show="dealTaskEvent(row)"
              popper-class="ne-pending"
              placement="right"
              trigger="hover"
          >
            <ul v-if="pendingListData.length > 0" class="ne-pending-items flex">
              <li v-for="(item2, index) in pendingListData" :key="index">
                <a @click="anchorFun(item2)">{{ item2.title }}</a>
              </li>
            </ul>
            <p v-else>暂无任务</p>
            <el-button
                slot="reference"
                class="ne-btn-bp blue"
                icon="el-icon-pie-chart"
                size="small"
            >待处理</el-button
            >
          </el-popover>
        </el-row>
      </template>
    </DicTable>
    <el-dialog
        class="ne-pending-task"
        append-to-body
        :width="isContent.width"
        :top="isContent.top"
        :title="isContent.title"
        v-if="pendItemVisible"
        :visible.sync="pendItemVisible"
        :close-on-click-modal='false'
    >
      <component
          :show.sync="pendItemVisible"
          :is="isContent.content"
          :ODKInfo="isContent.ODKInfo"
          :CTOInfo="isContent.CTOInfo"
      ></component>
    </el-dialog>
    <el-dialog append-to-body :close-on-click-modal='false' width="99%" top="3vh" title="销售品信息" :visible.sync="orderItemsVisible" v-if="orderItemsVisible">
      <order-items-list :custorder="custorder"></order-items-list>
    </el-dialog>
  </div>
</template>
<script>
import DicTable from "@/components/public/DicTable";
import OrderItemsList from "@/components/custorder/OrderItemsList";
import cardmixin from "@/components/custorder/ItemCard/cardmixin.js";
import cardmixin2 from "@/components/custorder/ItemCard/cardmixin2.js";
export default {
  name: "TableCard",
  mixins: [cardmixin,cardmixin2],
  data() {
    return {
      custSoNumberOrder:null,
      GBLtbs: {
        tableColumns: [
          {type: "radio", width: '2%'},
          {slotName: "custSoNumber", title: "流水号", width: '12%'},
          {field: "custNumber", title: "客户编码", width: '11%'},
          {field: "custName", title: "客户名称", width: '17%', sortable: true},
          {field: "createDate", title: "受理日期", width: '8%', sortable: true},
          {field: "audDate", title: "审核日期", width: '8%', sortable: true},
          {field: "custOrderTypeName", title: "单据类型", width: '5%'},
          {slotName: "status", title: "审核状态", width: '11%'},
          {slotName: "info", title: "详细"},
          {slotName: "operation", title: "操作", width: '22%'}
        ]
      }
    }
  },
  props: {
  },
  mounted() {
  },
  created() {
    this.$store.commit("orders/SET_CUST_ORDER_RADIOA", null);
    localStorage.setItem("radionSelectedcustormer", null);
  },
  components: {DicTable, OrderItemsList},
  methods: {
    custSoNumberSortEvent(){
      if(this.custSoNumberOrder == 'desc'){
        this.custSoNumberOrder = 'asc'
      }else if(this.custSoNumberOrder == 'asc'){
        this.custSoNumberOrder = null;
      }else{
        this.custSoNumberOrder = 'desc';
      }
      this.sortChange({sortList:this.custSoNumberOrder?[{'property':'custSoNumber','order':this.custSoNumberOrder}]:[]});
    },
    sortChange({ column, property, order, sortBy, sortList, $event }){
      if(property){
        this.custSoNumberOrder = null;
      }else{
        this.$refs['GBLtable'].$refs['vxeTable'].clearSort();
      }
      let params = null;
      this.SET_PAGEINDEX(1);
      if(sortList.length){
        params={
          orderByColumn:sortList[0].property,
          orderByMode:sortList[0].order,
          ...this.conditions
        };
      }else{
        params={...this.conditions};
      }
      this.qryPendingOrderList(params);
    },
    itemRadioChange({ row }) {
      this.custOrderRaidoA = JSON.parse(row.batchNbr) > 0 ? row.custSoNumber + '-' + row.batchNbr : row.custSoNumber
      localStorage.setItem("radionSelectedcustormer", JSON.stringify(row));
      // this.$emit("selectedCustomer", e);
    },
    /**
     * 当前页码改变时
     */
    handleCurrentChange(val) {
      this.SET_PAGEINDEX(val.currentPage);
      this.SET_PAGESIZE(val.pageSize);
      this.qryPendingOrderList(this.conditions);
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .is--sortable{
  cursor: pointer;
}
::v-deep .vxe-pager{
  padding-top: .2rem;
}
.ne-more-info{
  line-height: 3em;
}
::v-deep .vxe-pager--sizes{
  //display: none;
}
.ne-button-d{
  .ne-btn-bp{
    margin-right: 10px;
    text-align: center;
    &.blue{
      color: $blue;
      background-color: #eaf3fd;
      &:hover{
        background-color: #d5def9;
        border: 1px solid transparent;
      }
    }
    &.orange{
      color: #ffab20;
      &:hover{
        background-color: #f9e6c6;
        border: 1px solid transparent;
      }
    }
    &.red{
      color: red;
      &:hover{
        background-color: #f4d2d2;
        border: 1px solid transparent;
      }
    }
  }
  .ne-btn-sp{
    padding: 0 .12rem;
  }
}
.ne-pending {
  .ne-pending-items {
    flex-wrap: wrap;
    max-width: 2.5rem;
    li {
      padding: 0.05rem;
      //width: 1.5rem;
      a {
        color: $textColor1;
        padding-left: 0.1rem;
        position: relative;
        &:hover {
          text-decoration: none;
          color: $blue;
          &:before {
            background-color: $blue;
          }
        }
        &:before {
          display: inline-block;
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 0.05rem;
          height: 0.05rem;
          border-radius: 50%;
          background-color: $textColor1;
        }
      }
    }
  }

}
::v-deep .ne-row2-class{
  background-color: #fff;
  .vxe-cell--title{
    font-weight: 500;
    color: #333;
  }
}
.ne-cusnum{
  font-weight: 500;
  color: $blue;
  &:hover{
    text-decoration: underline;
    color: $blue;
  }
}
.m-status-icon{
  display: inline-block;
  width:0.3rem;
  height:0.3rem;
  position: relative;
  top:.03rem;
}
.box-right-icon p{
  margin-left: .08rem;
}
.red-icon{
  background-image: url("~@/assets/imgs/order/icon-yj-r.png");
  background-size:100% 100%;
}
.orange-icon{
  background-image: url("~@/assets/imgs/order/icon-yj-o.png");
  background-size:100% 100%;
}
.blue-icon{
  background-image: url("~@/assets/imgs/order/icon-yj-b.png");
  background-size:100% 100%;
}

</style>
